<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">
		<button-search ref="buttonSearch" class="pt-3" placeholder="要搜索的商品名称" @search="searchEvent"
			:showSuperSearch="false"></button-search>


		<el-table border class="mt-3" :data="tableData" style="width: 100%">

			<el-table-column type="expand">
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-3" :src="scope.row.user.avatar" alt="Generic placeholder image"
							style="height: 70px;width: 70px;border-radius: 100%;">
						<div class="media-body">
							<h6 class="mt-0 d-flex">
								{{ scope.row.user.username }} <small>{{ scope.row.review_time }}</small>
								<el-button v-if="!scope.row.extra && !textareaEdit" class="ml-auto" type="info"
									size="mini" @click="textareaEdit = true">回复</el-button>
							</h6>
							{{ scope.row.review.data }}
							<div class="py-2">
								<img v-for="(item, index) in scope.row.review.image" :key="index" :src="item"
									style="max-width: 100px;max-height: 100px;" />
							</div>

							<div v-if="textareaEdit">
								<el-input type="textarea" :rows="2" placeholder="请输入评价内容" v-model="textarea">
								</el-input>
								<div class="py-2">
									<el-button class="ml-auto mr-2" type="success" size="mini"
										@click="review(scope.row.id)">回复</el-button>
									<el-button class="ml-auto" type="info" size="mini"
										@click="closeTextarea">取消</el-button>
								</div>
							</div>

							<div v-if="scope.row.extra">
								<div class="media mt-3 bg-light p-2 rounded" v-for="(item, index) in scope.row.extra"
									:key="index">
									<div class="media-body">
										<h6 class="mt-0 d-flex">
											客服
											<el-button v-if="!textareaEdit" class="ml-auto" type="info" size="mini"
												@click="openTextarea(item.data)">修改</el-button>
										</h6>
										{{ item.data }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="ID" width="70" align="center" prop="id">
			</el-table-column>
			<el-table-column label="商品" width="380">
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-3" style="width: 60px;height: 60px;" :src="scope.row.goods_item.cover">
						<div class="media-body">
							<p class="mt-0">{{ scope.row.goods_item.title }}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column width="250" label="评价信息">
				<template slot-scope="scope">
					<div class="d-flex flex-column">
						<p>用户名：{{ scope.row.user.username }}</p>
						<p>评分：<el-rate v-model="scope.row.rating" disabled show-score text-color="#ff9900"
								score-template="{value}">
							</el-rate></p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="review_time" align="center" label="评价时间">
			</el-table-column>
			<el-table-column align="center" label="是否显示" width="150">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini"
						@click="changeStatus(scope.row)" plain>{{ scope.row.status ? '启用' : '禁用' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
			style="bottom: 0;left: 200px;right: 0;z-index: 100;">
			<div style="flex: 1;" class="px-2">
				<el-pagination :current-page="page.current" :page-sizes="page.sizes" :page-size="page.size"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-footer>

	</div>
</template>

<script>
import buttonSearch from "@/components/common/button-search.vue"
import common from '@/common/mixins/common.js';
export default {
	inject: ['layout'],
	mixins: [common],
	components: {
		buttonSearch
	},
	data() {
		return {
			preUrl: "goodsComment",


			textarea: "",
			textareaEdit: false,

			tableData: [],

			title: ""
		}
	},
	methods: {
		openTextarea(data) {
			this.textarea = data
			this.textareaEdit = true
		},
		review(id) {
			if (this.textarea == '') {
				return this.$message({
					message: '回复内容不能为空',
					type: 'error'
				})
			}
			this.layout.showLoading()
			this.axios.post('/admin/goods_comment/review/' + id, {
				data: this.textarea
			}, {
				token: true
			}).then(res => {
				this.closeTextarea()
				this.$message({
					message: '回复成功',
					type: 'success'
				})
				this.getList()
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		closeTextarea() {
			this.textarea = ''
			this.textareaEdit = false
		},
		getListResult(e) {
			console.log(e.list);
			this.tableData = e.list
		},
		// 获取请求列表分页url
		getListUrl() {
			return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&title=${this.title}`
		},
		searchEvent(e) {
			this.title = e
			this.getList()
		}
	},
}
</script>

<style></style>
